<table class="hydro-table servables-table">
  <thead class="hydro-table-head">
    <tr>
      <th class="hydro-table-head__cell">name</th>
      <th class="hydro-table-head__cell">status</th>
      <th class="hydro-table-head__cell">message</th>
      <th class="hydro-table-head__cell">actions</th>
    </tr>
  </thead>
  <tbody class="hydro-table-body">
    <tr
      class="hydro-table-body__row servables-table__row"
      *ngFor="let servable of servables"
    >
      <td class="hydro-table-body__cell">{{ servable.fullName }}</td>
      <td class="hydro-table-body__cell">
        <ng-container
          *ngTemplateOutlet="
            status;
            context: { $implicit: servable.status.status }
          "
        ></ng-container>

      </td>
      <td class="hydro-table-body__cell">
        {{ servable.status.msg }}
      </td>
      <td class="hydro-table-body__cell">
        <div class="servables-table__row-buttons">
          <button
            hs-button
            color="primary"
            (click)="onShowLog(servable.fullName)"
          >
            show logs
          </button>
          <button hs-button color="warning" (click)="onDelete(servable)">
            delete
          </button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<div *ngIf="isEmpty" class="servables--is-empty">
  Servable's list is empty
</div>

<ng-template #status let-status>
  <div
    class="servable__status"
    [ngSwitch]="status"
    [ngClass]="{ 'servable__status--serving': status === 'Serving' }"
  >
    <hydro-icon
      *ngSwitchCase="'Serving'"
      class="servable__status-icon"
      type="circle-check"
    ></hydro-icon>
    <hydro-icon
      *ngSwitchDefault
      class="servable__status-icon"
      type="clock"
    ></hydro-icon>
  </div>
</ng-template>
